<template>
  <div v-if="isCrosswise == false" class="rule-false" ref="rule"
    :style="{ height: '25px', width: elementWidth + 'mm' }">
    <div class="rule-false-content" v-for="(itm, index) in (elementWidth / 10)">
      <!-- {{ itm }} -->
      <div class="rule-false-ut">
        <div v-for="itm1 in 10" class="rule-false-ut-itm"></div>
        <div class="rule-false-num">{{ index }}</div>
      </div>
    </div>
  </div>
  <div v-else class="rule-true" :style="{ width: '25px', height: elementWidth + 'mm' }">
    <div class="rule-true-content" v-for="(itm, index) in (elementWidth / 10)">
      <div class="rule-true-left">{{ index }}</div>
      <div class="rule-true-right">
        <div class="rule-true-ut-itm" v-for="itm1 in 10"></div>
      </div>
    </div>
  </div>

</template>

<script setup>
// import BScroll from 'better-scroll'
const props = defineProps({
  // 是否横向显示
  isCrosswise: {
    type: Boolean,
    default: true
  },
  elementWidth: {
    type: Number,
    default: 30
  }
})


</script>




<style scoped>
.rule-false {
  /* padding-left: 5mm;
  padding-right: 5mm; */
  /* box-sizing: border-box; */
  /* height: 100%;
  width: 100%; */
  /* background-color: orange; */
  display: flex;

  .rule-false-content {
    flex: 1;
  }
}

.rule-false-ut {
  /* border-left: 0.5mm #8E8E8E solid; */
  box-sizing: border-box;
  width: 0.5mm;
  height: 25px;
  display: flex;
  width: 100%;
  position: relative;
  align-items: flex-start;

  .rule-false-ut-itm {
    flex: 1;
    border-left: 0.5mm #8E8E8E solid;
    box-sizing: border-box;
    width: 0.5mm;
    margin-top: 15px;
    height: 10px;
  }
}

.rule-false-ut-itm:nth-of-type(1) {
  /* border-left: none; */
  height: 25px !important;
  margin-top: 0px !important;
}

.rule-false-num {
  position: absolute;
  top: 0;
  left: 0.5mm;
  font-size: 10px;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
  user-select: none;
  /* Standard syntax */
}

.rule-true {
  /* background-color: orange; */
  display: flex;
  flex-direction: column;
}

.rule-true-content {
  border-top: 0.5mm #8E8E8E solid;
  box-sizing: border-box;
  flex: 1;
  display: flex;
}

.rule-true-left {
  /* background-color: red; */
  width: 15px;
  height: 100%;
  font-size: 10px;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
  user-select: none;
  /* Standard syntax */
}

.rule-true-right {
  height: 100%;
  width: 10px;
  /* background-color: green; */
  display: flex;
  flex-direction: column;
}

.rule-true-ut-itm {
  /* background-color: yellow; */
  flex: 1;
  border-top: 0.5mm #8E8E8E solid;
  box-sizing: border-box;
  width: 100%;
}

.rule-true-ut-itm:nth-of-type(1) {
  border-top: none;
}
</style>